<template>
  <div>
    <el-dialog
      title="客户"
      :visible="visibleDialog"
      width="60%"
      @close="quxiao"
    >
      <!-- 表单 -->
      <el-form ref="form" label-width="120px">
        <el-form-item label="经纪">
          <el-select v-model="form.agent" placeholder="请选择">
            <el-option
              v-for="item in agentlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 输入框 -->
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="form.wechat" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.desc" />
        </el-form-item>
        <el-form-item label="封面">
          <!-- 上传图片 -->
          <ImgUpload ref="ImgUpload" />
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <template>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="addbtn">确认</el-button>
          <el-button @click="quxiao">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { addclients, ditclients } from '@/api/clients'
import { getAgentsList } from '@/api/agents'
export default {
  props: {
    visibleDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      agentlist: [],
      agentSelect: '',
      form: {
        agent: '', // 经纪人
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      paging: {
        // 获取条目数
        limit: 3,
        // 获取索引位置
        start: 0,
        page: 1,
        name: ''
      }
    }
  },
  created() {
    this.getAgentsList()
  },
  methods: {
    async getAgentsList() {
      const { data } = await getAgentsList(this.paging)
      this.agentlist = data
      // console.log("经纪", data);
    },

    // 新增按钮
    async addbtn() {
      // 发起请求前，先确定图片已经上传完毕
      if (this.$refs.ImgUpload.percentage !== 100) {
        return this.$message({
          type: 'warning',
          message: '图片上传中，请稍等'
        })
      }
      // 把插件里的图片拿过来
      this.form.image = this.$refs.ImgUpload.fileList[0].url
      if (this.form.id) {
        // 编辑接口
        await ditclients(this.form)
        // 重新渲染
        this.$emit('clienR')
        // 关闭弹窗
        this.$emit('update:visibleDialog', false)
      } else {
        // 新增接口
        await addclients(this.form)
        // 重新渲染
        this.$emit('clienR')
        // 关闭弹窗
        this.quxiao()
      }
    },
    // 取消按钮
    quxiao() {
      this.form = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      // 取消校验
      this.$refs.form.resetFields()
      // 清空照片
      this.$refs.ImgUpload.fileList = []
      // 关闭弹窗
      this.$emit('update:visibleDialog', false)
    }
  }
}
</script>

<style>
.el-dropdown-link {
  cursor: pointer;

  color: black;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* 封面 */
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
